@import './../../assert/stylus/cube/variable.styl'
@import './../../assert/stylus/variable.styl'
@import './../../assert/stylus/mixin.styl'

 .header
      position relative
      overflow: hidden
      color $color-white
      background $color-background-ss
      .bulletin-wrapper
        position relative
        display flex
        align-items center
        height 28px
        line-height 28px
        padding 0 8px
        background $color-background-sss
        .bulletin-title
          flex 0 0 22px
          width: 22px
          height: 12px
          margin-right: 4px
          // bg-image('bulletin')
          background-image: url('icon/bulletin@2x.png')
          @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
            background-image: url('icon/bulletin@3x.png')
          background-size 22px 12px
          background-repeat no-repeat
        .bulletin-text
          flex 1
          white-space nowrap
          overflow: hidden
          text-overflow ellipsis
          font-size $fontsize-small-s
        .icon-keyboard_arrow_right
          flex 0 0 10px
          width: 10px
          font-size $fontsize-small-s
      .content-wrapper
        position relative
        display flex
        align-items center
        padding 24px 12px 18px 24px
        .avatar
          flex 0 0 64px
          width 64px
          margin-right 16px
          img
            border-radius 2px
        .content
          flex 1
          .title
            display flex
            align-items center
            margin-bottom 8px
            .brand
              width 30px
              height 18px
              // bg-image('brand')
              background-image: url('icon/brand@2x.png')
              @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
                background-image: url('icon/brand@3x.png')
              background-size 30px 18px
              background-repeat no-repeat
            .name
              margin-left 6px
              font-size $fontsize-large
              font-weight bold
          .description
            line-height 12px
            font-size $fontsize-small
          div.description
            margin-bottom 8px
            line-height 12px
            font-size $fontsize-small
          .support
            display flex
            align-items center
            .support-ico
              margin-right 4px
            .text
              line-height 12px
              font-size $fontsize-small-s
        .support-count
          position absolute
          right 12px
          bottom 14px
          display flex
          align-items center
          padding 0 8px
          height: 24px
          line-height 24px
          text-align center
          border-radius 14px
          background $color-background-sss
          .count
            font-size $fontsize-small-s
          .icon-keyboard_arrow_right
            margin-left 2px
            line-height 24px
            font-size $fontsize-small-s
    
    .background
      position absolute
      top 0
      left 0
      right 0
      width 100%
      height 100%
      z-index -1
      filter blur(10px)